<template>
  <div>
    <div class="card">
      <div
        class="mask"
        v-if="card.is_find"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-yirenling1"></use>
        </svg>
      </div>
      <div class="card-image">
        <img
          v-if="!card.img_url"
          src="../../../../../assets/avatar1.svg"
          alt=""
        >
        <img
          v-else
          :src="card.img_url"
          alt=""
        >
      </div>
      <p class="card-title">认领者:{{card.find_user}}</p>
      <p class="card-body">
        {{card.message}}
      </p>
      <div class="card-footer">
        <div class="card-footer-wrapper ">
          <input
            class="card-footer-input"
            type="radio"
            name="btn"
            value="option3"
            ref="card-footer-input"
            @click="btnClick"
          >
          <div
            :class="['card-footer-btn',{'active':card.is_find}]"
            ref="masterBtn"
          >
            <span class="card-footer-span">认领</span>

          </div>
        </div> <svg
          @click="rebackMask"
          class="icon reback-btn"
          aria-hidden="true"
        >
          <use xlink:href="#icon-chexiao1"></use>
        </svg>
        <p class="footer">发表者<span class="by-name">{{card.username}}</span> <span class="date">{{$formatDate2(card.moment)}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import { updateFindGoodsAPI, findUserInfoAPI } from "@/api";
// lostfind_id
export default {
  data() {
    return {
      goodImg: false,
    };
  },
  props: ["card"],
  methods: {
    rebackMask() {
      if (this.user_id === this.card.find_id || !this.card.user_id) {
        this.updateFindGoods(0);
      }
    },

    // 认领按钮点击事件
    btnClick() {
      if (!this.card.is_find) {
        this.updateFindGoods(1);
      }
    },
    // lostfind_id,code 0 为 取消  1为认领
    async updateFindGoods(code) {
      const res = await updateFindGoodsAPI({
        lostfind_id: this.card.id,
        code: code,
      });
      if (res.status === 0) {
        // 更新成功重新获取 findGood卡片

        await this.$store.dispatch("initFindCards");

        console.log("okok");
      }
    },
  },

  computed: {
    user_id() {
      return this.$store.state.users.userInfo.id;
    },
  },
  mounted() {
    this.$store.dispatch("initUserInfo");
    this.$store.dispatch("initFindCards");
  },
};
</script>
 
 <style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  height: 100%;
  justify-content: center;
  align-items: center;
}
.icon {
  width: 90%;
  height: 90%;
}
.reback-btn {
  width: 33px;
  height: 33px;
  opacity: 0.8;
  cursor: pointer;
}
// mask 蒙层
.mask {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65%;
  opacity: 0.7;
  top: 0;
  left: 0;
  background-color: #c3c3c3;
  border-radius: 10px;
}
.mask.mask-active {
  display: flex;
}

/**卡片底部 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 卡片认领按钮 */
  margin-bottom: -14px;
  .card-footer-wrapper {
    --font-color-dark: #323232;
    --font-color-light: #fff;
    --bg-color: #fff;
    --main-color: #3ad5ff;
    --shadow-color: #f6a5a7f0;
    position: relative;
    width: 30%;
    height: 80%;
    background-color: var(--bg-color);
    border: 2px solid var(--main-color);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    box-shadow: 4px 4px var(--shadow-color);
    .card-footer-input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      appearance: none;
      cursor: pointer;
    }
    .card-footer-btn {
      width: 100%;
      height: 100%;
      background-color: var(--bg-color);
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-footer-btn.active {
      background-color: var(--main-color);
    }
    .card-footer-span {
      color: var(--font-color-dark);
    }

    .card-footer-span {
      font-size: 1.3rem;
    }
  }
}

/* 结束 */

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  gap: 20px; /* 设置子元素之间的间距 */
  height: 100%;
  justify-content: center;
  align-items: center;
}
.card {
  padding: 20px;
  display: flex;
  width: 330px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  height: 480px;
  border-radius: 20px;
  background: #e8e8e8;
  box-shadow: 2px 2px 4px #dadada, -2px -2px 4px #f6f6f6;
  transition: 0.4s;
}
.footer {
  display: flex;
  justify-content: right;
  align-items: center;
}

.card:hover {
  translate: 0 -10px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2e54a7;
  margin: 15px 0 0 10px;
}

.card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 170px;
  overflow: hidden;
  background-color: #c9c9c9;
  border-radius: 15px;
  box-shadow: inset 8px 8px 10px #c3c3c3, inset -8px -8px 10px #cfcfcf;
}
.card-image > img {
  width: 100%;
  height: 100%;
}
.card-body {
  margin: 13px 0 0 10px;
  color: rgb(31, 31, 31);
  font-size: 15px;
  min-height: 80px;
}

.footer {
  float: right;
  margin: 28px 0 0 18px;
  font-size: 13px;
  color: #636363;
}

.by-name {
  font-weight: 700;
}
</style>